<template>
  <div>
    <!-- check-strictly:在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false -->
    <el-tree
      v-model="CheckValue"
      :data="tableData"
      node-key="value"
      show-checkbox
      ref="tree"
      default-expand-all
      :check-strictly="systemNodeFlag"
    >
      <!-- <template slot-scope="data"> //{{ data.row }} </template> -->

      <span class="action-group" slot-scope="{ node, data }">
        <div class="action-text">
          <span>{{ node.label }}</span>
        </div>
        <!-- <span v-for="(item, index) in data.ButtonValue.split(',')" :key="index">
          {{ item }}
        </span> -->
        <!-- <el-checkbox-group> -->
        <div class="action-item">
          <el-checkbox
            v-for="(item, index) in data.ButtonValue"
            :key="index"
            v-model="data.strings"
            :label="item"
            @change="() => {}"
          >
            {{ item }}</el-checkbox
          >
        </div>

        <!-- </el-checkbox-group> -->
      </span>
    </el-tree>
    <el-button @click="Save">保存</el-button>
  </div>
</template>

<script>
export default {
  props: {
    PRid: null,
  },
  data() {
    return {
      ButtonList: [
        { text: "查询", value: "Search" },
        { text: "新建", value: "Add" },
        { text: "删除", value: "Delete" },
        { text: "编辑", value: "Update" },
        { text: "导入", value: "Import" },
        { text: "导出", value: "Export" },
        { text: "上传", value: "Upload" },
        { text: "审核", value: "Audit" },
      ],
      Pid: [],
      CheckBoxValue: [],
      tableData: [],
      CheckValue: [],
      systemNodeFlag: false,
    };
  },
  created() {
    this.GetPermissionInfo();
  },
  methods: {
    //权限分配修改
    GetPermissionByRoleId() {
      this.axios
        .get(
          "http://localhost:5255/api/Role/GetRolePermissionByRoleId?RoleId=" +
            this.PRid
        )
        .then((res) => {
          //console.log(this.$refs.tree);
          console.log(res.data.Data);
          var ids = [];
          res.data.Data.forEach((element) => {
            ids.push(element.PermissionId);
            //console.log(this.tableData);
            this.tableData.forEach((x) => {
              if (element.PermissionId == x.value) {
                //alert(1);
                x.strings =
                  element.ButtonValue != null
                    ? element.ButtonValue.split(",")
                    : [];
              }
              if (x.children != null) {
                //console.log(x.children);
                x.children.forEach((x1) => {
                  if (element.PermissionId == x1.value) {
                    x1.strings =
                      element.ButtonValue != null
                        ? element.ButtonValue.split(",")
                        : [];
                  }
                });
              }
            });
          });
          console.log(this.tableData);
          this.systemNodeFlag = true;
          //alert(ids.toString());
          this.$nextTick(() => {
            //当数据更新了，在dom中渲染后，自动执行该函数
            this.$refs.tree.setCheckedKeys(ids);
            // this.systemNodeFlag = false;
          });
        });
    },
    GetPermissionInfo() {
      this.axios
        .get("http://localhost:5255/api/Permission/GetPermission")
        .then((res) => {
          this.tableData = res.data.Data;
          this.GetPermissionByRoleId();
        });
    },
    //权限分配添加
    Save() {
      let checkNodes = this.$refs.tree
        .getHalfCheckedKeys()
        .concat(this.$refs.tree.getCheckedKeys());

      if (checkNodes.length == 0) {
        this.$message.error("至少选择一项权限");
        return;
      }
      //console.log(checkNodes);
      let submitNodes1 = [];
      this.tableData.forEach((element) => {
        if (checkNodes.some((a) => a == element.value)) {
          submitNodes1.push(element);
        }
      });

      submitNodes1.forEach((element) => {
        //if (!element.children) {
        element.children.forEach((el) => {
          if (checkNodes.some((a) => a == el.value)) {
            submitNodes1.push(el);
          }
        });
        //}
      });
      var RolePer = [];
      submitNodes1.forEach((x) => {
        RolePer.push({
          PerId: x.value,
          ButtonValue: x.strings.toString(),
        });
      });
      // console.log(RolePer);
      var from = {
        RoleId: this.PRid,
        PerIdAndButtonValue: RolePer,
      };
      this.axios
        .post("http://localhost:5255/api/Role/AddRolePermission", from)
        .then((res) => {
          if (res.data.Success) {
            this.$message.success(res.data.ErrorInfo);
            this.$emit("CloseRolePerAdd");
          } else {
            this.$message.error(res.data.ErrorInfo);
          }
        });
    },
  },
};
</script>

<style scoped>
.action-group {
  width: 100%;
  display: flex;
}
.action-text {
  font-size: 14px;
  margin-right: 10px;
}
.action-item {
  flex: 2;
}
.action-item > label {
  min-width: 25px;
  margin-left: 3px;
  margin-right: 10px;
}
.action-container >>> .el-tree-node {
  padding: 5px 0;
}
.action-container >>> .el-checkbox__label {
  padding-left: 5px;
}
</style>